<template>
    <el-dialog
        :title="title === 'add' ? '新增' : '编辑'"
        :close-on-click-modal="false"
        :visible.sync="dialogVisible"
        width="35%"
        :info="info"
        @close="closeDialog"
    >
        <el-form ref="form" :inline="false" :model="formData" :rules="rules" label-width="150px" size="normal">
            <el-form-item label="萌宠蛋名称" prop="name">
                <el-input
                v-model="formData.name"
                placeholder="请输入萌宠蛋名称"
                />
            </el-form-item>
            <!-- <el-form-item label="萌宠名称" prop="pet_name">
                <el-input
                v-model="formData.pet_name"
                placeholder="请输入萌宠名称"
                />
            </el-form-item> -->
            <el-form-item label="萌宠蛋图片" prop="icon">
                <div class="awardBox">
                    <div class="awardInfo" :class="{'hide_box': formData.icon, 'show_box': !formData.icon}">
                        <img v-if="formData.icon" :src="formData.icon" class="avatar" />
                        <el-upload
                            v-else
                            ref="upload"
                            :auto-upload="true"
                            :http-request="customizeUpload"
                            :on-success="handlePictureSuccess1"
                            action=""
                            class="upload-demo"
                            :limit="1"
                            list-type="picture-card"
                        >
                            <i slot="default" class="el-icon-plus"></i>
                        </el-upload>
                        <span class="closeIcon" @click="handlePictureRemove1"><i class="el-icon-delete"></i></span>
                    </div>
                </div>
            </el-form-item>
            <!-- <el-form-item label="孵化动效" prop="born_special">
                <div class="awardBox">
                    <div class="awardInfo" :class="{'hide_box': formData.born_special, 'show_box': !formData.born_special}">
                        <div v-if="formData.born_special">
                            <img v-if="!formData.born_special.includes('.mp4')" :src="formData.born_special" class="avatar" />
                            <video
                                v-else
                                :src="formData.born_special"
                                autoplay 
                                controls
                                muted
                                style="width: 200px"
                            ></video>
                        </div>
                        <el-upload
                            v-else
                            ref="upload"
                            :auto-upload="true"
                            :http-request="customizeUpload"
                            :on-success="handlePictureSuccess2"
                            action=""
                            class="upload-demo"
                            :limit="1"
                            list-type="picture-card"
                        >
                            <i slot="default" class="el-icon-plus"></i>
                        </el-upload>
                        <span class="closeIcon" @click="handlePictureRemove2"><i class="el-icon-delete"></i></span>
                    </div>
                </div>
            </el-form-item> -->
            <el-form-item label="收费方式" prop="type">
                <div>
                    <div>
                        <el-radio v-model="formData.type" label="default" @change="handleChange">免费</el-radio>
                    </div>
                    <div>
                        <el-radio v-model="formData.type" label="special">付费</el-radio>
                        <el-input
                            :disabled="formData.type === 'default'"
                            v-model="formData.coin"
                            placeholder="请输入请输入付费M豆数量"
                        />
                    </div>
                </div>
                
            </el-form-item>
            <el-form-item label="进化金币" prop="evolve_coin">
                <el-input
                v-model="formData.evolve_coin"
                placeholder="请输入萌宠蛋进化金币"
                />
            </el-form-item>
            <el-form-item label="孵化时间" prop="second">
                <el-input
                v-model="formData.second"
                placeholder="请输入萌宠蛋孵化时间"
                />
            </el-form-item>

            <el-form-item label="横幅基本文案颜色">
                <el-input v-model="formData.banner_color.default" placeholder="请输入横幅基本文案颜色"></el-input>
                <!-- <div class="flex mb-4">
                    <span class="fontColor">横幅基本文案颜色：</span>
                </div> -->
            </el-form-item>
            <el-form-item label="横幅动态文案颜色">
                <el-input v-model="formData.banner_color.dynamic" placeholder="请输入横幅动态文案颜色"></el-input>
                <!-- <div class="flex mb-4">
                    <span class="fontColor">横幅动态文案颜色：</span>
                </div> -->
            </el-form-item>
            
            <el-form-item label="横幅样式" prop="detail">
                <div class="awardBox">
                    <div class="awardInfo" :class="{'hide_box': formData.detail, 'show_box': !formData.detail}">
                        <img v-if="formData.detail" :src="formData.detail" class="avatar" />
                        <el-upload
                            v-else
                            ref="upload"
                            :auto-upload="true"
                            :http-request="customizeUpload"
                            :on-success="handlePictureSuccess3"
                            action=""
                            class="upload-demo"
                            :limit="1"
                            list-type="picture-card"
                        >
                            <i slot="default" class="el-icon-plus"></i>
                        </el-upload>
                        <span class="closeIcon" @click="handlePictureRemove3"><i class="el-icon-delete"></i></span>
                    </div>
                </div>
            </el-form-item>
            <!-- <el-form-item label="概率" prop="rate">
                <el-input
                v-model="formData.rate"
                placeholder="请输入萌宠蛋孵化概率"
                />
            </el-form-item> -->
            <el-form-item label="详细介绍" prop="desc">
                <el-input v-model="formData.desc" type="textarea" rows="5" placeholder="请输入萌宠蛋的详细介绍" size="normal" clearable resize="none"></el-input>
            </el-form-item>
        </el-form>

        <section slot="footer">
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="onSubmit()">确定</el-button>
        </section>
    </el-dialog>
</template>
  
<script>
  import { petEggSave } from '@/api/petsManagement'
  export default {
    name: '',
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: 'add'
        },
        info: {
            type: Object,
            default: () => {
                return {
                    id: undefined,
                    name: undefined,
                    pet_name: undefined,
                    born_special: undefined,
                    coin: undefined,
                    evolve_coin: undefined,
                    second: undefined,
                    type: 'special',
                    rate: undefined,
                    desc: undefined,
                    icon: undefined,
                    banner_color: {
                        default: undefined,
                        dynamic: undefined,
                    },
                    is_show: undefined
                }
            }
        },
        
    },
    data() {
      return {
        formData: {
            id: undefined,
            name: undefined,
            pet_name: undefined,
            born_special: undefined,
            coin: undefined,
            evolve_coin: undefined,
            second: undefined,
            type: 'special',
            rate: undefined,
            desc: undefined,
            icon: undefined,
            banner_color: {
                default: undefined,
                dynamic: undefined,
            },
            is_show: undefined
        },
        rules: {
            name: [{ required: true, message: '请输入萌宠蛋名称', trigger: 'blur' }],
            pet_name: [{ required: true, message: '请输入萌宠名称', trigger: 'blur' }],
            icon: [{ required: true, message: '请上传萌宠图片', trigger: 'blur' }],
            born_special: [{ required: true, message: '请上传孵化动效', trigger: 'blur' }],
            type: [{ required: true, message: '请选择收费方式', trigger: 'blur' }],
            desc: [{ required: true, message: '请输入详细介绍', trigger: 'blur' }],
        },
        options: [],
        fileListLength: 0
      }
    },
    watch: {
        title: async function(newValue, oldValue) {
            console.log(newValue,'title',this.info,this.info.banner_color)
            if (newValue === 'edit') {
                this.formData = {
                    id: this.info.id,
                    name: this.info.name,
                    pet_name: this.info.pet_name,
                    born_special: this.info.born_special,
                    coin: this.info.type == 'default' ? undefined : this.info.coin,
                    evolve_coin: this.info.evolve_coin,
                    second: this.info.second,
                    type: this.info.type,
                    rate: this.info.rate,
                    desc: this.info.desc,
                    icon: this.info.icon,
                    banner_color: {
                        default: this.info.banner_color ? JSON.parse(this.info.banner_color).default : undefined,
                        dynamic: this.info.banner_color ? JSON.parse(this.info.banner_color).dynamic : undefined,
                    },
                    is_show: this.info.is_show
                }
            }
        }
    },
    created() {
    },
  
    methods: {
        
        closeDialog() {
            if (this.$refs['form']) {
                this.$refs['form'].clearValidate(); // 清除整个表单的校验
                this.$refs['form'].resetFields() // 清除整个表单的校验
            }
            this.$emit('update:title', 'add')
            this.$emit('update:dialogVisible', false)
            this.formData = {
                id: undefined,
                name: undefined,
                born_special: undefined,
                coin: undefined,
                evolve_coin: undefined,
                second: undefined,
                type: 'special',
                rate: undefined,
                desc: undefined,
                icon: undefined,
                banner_color: {
                    default: undefined,
                    dynamic: undefined,
                },
                is_show: undefined
            }
        },
        handleCancel() {
            this.$emit('update:title', 'add')
            this.$emit('update:dialogVisible', false)
        },
        beforeAvatarUpload(file) {
            // const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/webp' || file.type === 'image/gif'
            // const isLt2M = file.size / 1024 / 1024 < 2

            // if (!isJPG) {
            //     this.$message.error('请上传JPG/PNG格式的图片!')
            // }
            // if (!isLt2M) {
            //     this.$message.error('上传图片大小不能超过 2MB!')
            // }
            // return isJPG && isLt2M
        },
        onSubmit() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    for (let key in this.formData) {
                        this.formData[key] = !this.formData[key] ? undefined : this.formData[key]
                    }
                    if(!this.info.is_show) {
                        this.info.is_show = 0
                    }
                    petEggSave(this.formData).then(res => {
                        if(res.code === 200) {
                            this.dialogVisible = false
                            this.$message({
                                type: 'success',
                                message: '操作成功'
                            })
                            this.$emit('update:title', 'add')
                            this.$emit('update:dialogVisible', false)
                            this.$emit('updateTable')
                        }
                    })
                }
            })
        },
        handlePictureSuccess(response, file, fileList) {
            console.log(response, file, fileList)
            this.fileListLength = fileList.length
            this.formData.shows.push({
                url: this.ossLastImgUrl
            })
            this.formData.show_picture = []
            if(fileList.length) {
                this.formData.show_picture = []
                fileList.map(item => {
                    this.formData.show_picture.push(item.url)
                })
            }else {
                this.formData.show_picture = undefined
            }
            
        },
        handlePictureRemove(file, fileList) {
            console.log(file, fileList)
            this.formData.shows = fileList
            if(fileList.length) {
                this.formData.show_picture = []
                fileList.map(item => {
                    this.formData.show_picture.push(item.url)
                })
            }else {
                this.formData.show_picture = undefined
            }
            // this.formData.show_picture[index] = undefined
            // this.$set(this.formData.show_picture,index,undefined)
        },
        handlePictureSuccess1() {
            this.formData.icon = this.ossLastImgUrl
        },
        handlePictureRemove1() {
            this.formData.icon = undefined
        },
        handlePictureSuccess2() {
            this.formData.born_special = this.ossLastImgUrl
        },
        handlePictureRemove2() {
            this.formData.born_special = undefined
        },
        handlePictureSuccess3() {
            this.formData.detail = this.ossLastImgUrl
        },
        handlePictureRemove3() {
            this.formData.detail = undefined
        },
        handleChange(val) {
            if(val = 'default') {
                this.formData.coin = undefined
            }
        }
    }
  }
</script>
<style lang="scss" scoped>
    ::v-deep.avatar-uploader .el-upload {
        border        : 1px dashed #d9d9d9;
        border-radius : 6px;
        cursor        : pointer;
        position      : relative;
        overflow      : hidden;
    }
    
    .avatar-uploader .el-upload:hover {
        border-color : #409eff;
    }
    
    .avatar-uploader-icon {
        font-size   : 28px;
        color       : #8c939d;
        width       : 100px;
        height      : 100px;
        line-height : 100px;
        text-align  : center;
    }
    
    .avatar {
        width   : 100px;
        height  : 100px;
        display : block;
    }
    
    ::v-deep{ 
        .hide_box{
            .el-upload--picture-card {
                display: none;
            }
        }
        .el-upload-list__item {
            margin-right: 1em !important;
        }
    }


    .awardBox {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        .awardInfo {
            margin-right: 10px;
            border-radius: 4px;
            position: relative;
            overflow: hidden;
            width: 148px;
            height: 148px;
            border: 1px solid #c0ccda;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;

            .closeIcon {
                position: absolute;
                top: 0;
                bottom: 0;
                right: 0;
                left: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 10px;
                background: rgba(0,0,0,.6);
                color: #ffffff;
                overflow: hidden;
                cursor: pointer;
                font-size: 18px;
                opacity: 0;
                z-index: 0;
            }
        }
        .hide_box:hover {
            .closeIcon {
                opacity: 1;
                z-index: 1;
            }
        }
        .show_box {
            .closeIcon {
                opacity: 0;
                z-index: -1;
            }
        }
    }
.fontColor{
        display: inline-block;
        width: 180px;
        text-align: right;
    }
</style>
  